<template>
  <div>
    <el-input
      v-model="input"
      style="width: 200px;"
      placeholder="请输入内容"
      @blur="blur"
    ></el-input>
    <el-button type="primary" @click="search">搜索</el-button>
    <div
      v-show="show"
      v-clickoutside="handleClose"
      tabindex="1"
      class="pane"
      @blur="boxBlur"
      @focus="boxfocus"
    >
      <el-button tabindex="1" @click="click">点击事件</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      show: false
    }
  },
  methods: {
    blur() {},
    boxBlur() {
      console.log('blur')
      //   this.show = false
    },
    boxfocus() {
      console.log('focus')
    },
    click() {
      console.log('click')
    },
    handleClose() {
      this.show = false
    },
    search() {
      this.show = true
      this.$nextTick(() => {
        document.getElementsByClassName('pane')[0].focus()
      })
    }
  }
}
</script>

<style>
.pane {
  background: #ccc;
  width: 200px;
  height: 100px;
}
</style>
